<template>
<div>
   <!-- API接口横条 -->
      <div class="w-full flex items-center group mt-6">
        <div
          class="h-[1px] flex-1 bg-gradient-to-r from-transparent via-violet-400/60 dark:via-violet-600 to-transparent transition-all duration-500 group-hover:via-violet-600 dark:group-hover:via-violet-400">
        </div>
        <div class="mx-4 whitespace-nowrap flex items-center">
          <span
            class="text-violet-600 bg-violet-50 dark:bg-violet-900 dark:text-violet-200 px-3 py-1 rounded-full text-sm font-medium ring-1 ring-inset ring-violet-100 dark:ring-violet-800">
            <span class="mr-2">⚙️</span>API接口
          </span>
        </div>
        <div
          class="h-[1px] flex-1 bg-gradient-to-l from-transparent via-violet-400/60 dark:via-violet-600 to-transparent transition-all duration-500 group-hover:via-violet-600 dark:group-hover:via-violet-400">
        </div>
      </div>

      <!-- 文件上传卡片 -->
      <div class="w-full flex flex-row mt-6">
        <div class="w-1/2 ml-2">
          <div class="flex flex-row h-full">
            <div class="w-full card-name1 bg-gradient-to-br from-teal-400 to-cyan-400 dark:from-teal-700 dark:to-cyan-700 flex flex-col h-full justify-center items-center p-6 rounded-3xl 
         hover:from-teal-600 hover:to-cyan-600 dark:hover:from-teal-800 dark:hover:to-cyan-800 relative transition-all duration-300
         shadow-lg hover:shadow-xl dark:shadow-gray-800/50 border border-white/20 dark:border-gray-600">
              <span
                class="text-sm absolute top-0 left-0 pl-2 pt-2 text-slate-300 dark:text-gray-400 underline">stats</span>
              <span class="text-2xl pt-3 text-slate-100 dark:text-gray-100 font-medium tracking-tight">文件传输</span>
            </div>
            <div
              class="mr-3 card-line1 flex justify-center items-center w-[2px] ml-3 bg-gradient-to-b from-slate-300 to-slate-400/50 dark:from-gray-600 dark:to-gray-500">
            </div>
          </div>
        </div>
        <div class="w-1/2 mr-2">
          <div class="relative flex flex-col justify-center items-center w-full p-5 bg-slate-100 dark:bg-gray-800 h-full rounded-2xl
       shadow-inner border border-slate-200 dark:border-gray-700">
            <span class="absolute top-0 left-0 pl-2 pt-1 text-slate-500 dark:text-gray-400 text-sm">data</span>
            <span class="pt-3 text-slate-700 dark:text-gray-300 leading-relaxed">正在开发中.......</span>
          </div>
        </div>
      </div>
</div>

</template>

<script setup lang="ts">
        
</script>

<style scoped>

/* 紧跟在name之后用+  */
/* 默认浅色模式颜色 */
.card-name1:hover+.card-line1{
  background-color: #0f8054;
  /* 浅色模式颜色 */
  /* transition: background-color 0.3s ease; */
  background-image: none;
  /* 添加过渡动画 */
}

/* 深色模式覆盖 */
.dark .card-name1:hover+.card-line1 {
  background-color: #ee8822;
  /* 深色模式颜色（青色） */
  background-image: none;
  /* 移除渐变背景 */
}
</style>